<template>
    <div class="activity">
        <div class="hot">
            <div class="main">
               <h1>新品体验官招募</h1> 
               <p>成为新品体验官，抢先体验大疆全球首发新品！成功完成任务可获得作品展示机会，还能免费获赠新品！</p>
                <div class="btn">
                    了解详细
                </div>
            </div>
            
            
        </div>
        <foot-navbar></foot-navbar>
    </div>
</template>

<script>

import FootNavbar from '@/components/FootNavbar.vue'
    export default {
  components: {  FootNavbar },
        
    }
</script>

<style lang="scss" scoped>
.activity{
    .hot{
        width: 100%;
        height: 720px;
        background-image: url('../assets/img/activity.jpg');
        background-size: cover;
        background-position: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        color: #fff;
        .main{
            width: 640px;
            margin-top: -80px;
            h1{
                font-size: 48px;
                text-align: center;
            }
            p{
                text-align: center;
                font-size: 18px;
                margin-top: 24px;
            }
            .btn{
                display: flex;
                margin-left: 200px;
                justify-content: center;
                width: 240px;
                box-sizing: border-box;
                margin-top: 34px;
                border-radius: 99px;
                font-size: 16px;
                padding: 14px 78px;
                border: 1px solid #fff;
                
            }
        }
        
    }
}
</style>